<template>
  <view class="goods-params">
    <Form title="更多">
      <FormItem label="上传商品图片" text-align="right">
        <Upload :file="formData.image" @success="uploadSuccess" />
      </FormItem>
      <FormItem label="商品规格" :show-arrow="true" note="杯型、分量等不同规格对应不同价格" text-align="right" @click.native="$goto('goods_sku')"></FormItem>
      <FormItem v-if="showSkuTable">
        <SkuTable :data="skuTableData" />
      </FormItem>
      <FormItem label="商品属性" :show-arrow="true" note="指辣度、温度、颜色等，不同属性不影响价格" text-align="right" @click.native="$goto('goods_props')"></FormItem>
      <FormItem v-if="formData.props.length>0">
        <PropsTable :data="propTableData" />
      </FormItem>
    </Form>
  </view>
</template>

<script>
import Form from "../../../components/public/Form/index.vue";
import FormItem from "../../../components/public/FormItem/index.vue";
import Upload from "../../../components/public/Upload/index.vue";
import SkuTable from "./SkuTable.vue";
import PropsTable from "./PropsTable.vue";
import { mapState, mapMutations } from "vuex";
export default {
  components: { Form, FormItem, Upload, SkuTable, PropsTable },
  props: {
    mode: {
      type: String,
      default: () => "add" // add modify
    }
  },
  data() {
    return {
      formData: {
        image: "",
        skuList: [],
        props: []
      },
      skuTableData: {
        key: "",
        values: []
      },
      propTableData: []
    };
  },
  computed: {
    ...mapState({
      goodsInfo: state => state.goods.goodsInfo
    }),
    showSkuTable() {
      return (
        this.formData.skuList.length > 0 &&
        this.formData.skuList[0].spec &&
        this.formData.skuList[0].spec.length > 0
      );
    }
  },
  watch: {
    ["formData.desc"]() {
      this.SET_GOODS_INFO(this.formData);
    },
    ["formData.skuList"](v) {
      this.SET_GOODS_INFO(this.formData);
    },
    ["formData.props"]() {
      this.SET_GOODS_INFO(this.formData);
    }
  },
  created() {
    if (this.goodsInfo.id && this.mode == "modify") this.init();
  },
  mounted() {
    uni.$on(this.$consts.EMIT_TYPE.SET_SKU_LIST, res => {
      // 获取最新数据中没有的旧数据
      let skuList =this.formData.skuList.filter(v => {
        return !res.skuList.find(s => s.id == v.id);
      });
      this.formData.skuList = [...res.skuList, ...skuList];
      this.skuTableData = res.formData;
    });
    uni.$on(this.$consts.EMIT_TYPE.SET_PROPS, res => {
      this.formData.props = res.props.map(v => {
        return {
          key: v.key,
          values: v.values
        };
      });
      this.propTableData = res.props;
    });
  },
  methods: {
    ...mapMutations({
      SET_GOODS_INFO: "SET_GOODS_INFO"
    }),
    init() {
      for (const key in this.formData) {
        this.formData[key] = this.goodsInfo[key];
      }
      this.goodsInfo.skuList.forEach(item => {
        if (item.spec && item.spec.length > 0) {
          let spec = item.spec[0];
          this.skuTableData.key = spec.key;
          this.skuTableData.values.push({
            spec: spec.value,
            price: item.price,
            stock: item.stock
          });
        }
      });
      // console.log(this.skuTableData, "this.skuTableData");

      this.propTableData = this.formData.props;
    },
    uploadSuccess(res) {
      this.formData.image = res.data.url;
    },
    getData() {
      return this.formData;
    }
  }
};
</script>

<style scoped lang="scss">
</style>
